<template>
	<view class="contView" @touchmove.stop.prevent>
		<view class="cont">
			<view class="shareContent">
				<view class="poster">
					<i class="iconfont iconqingkong" @click="closeFunc"></i>
					<l-painter v-if="isShow" :board="base" ref="painter" width="600rpx" height="560rpx" isH5PathToBase64
						isRenderImage @success="path = $event" />
					<view class="tips">
						<view class="tips-left" @click="saveImage">保存图片<br />到手机相册</view>
						<i class="iconfont iconxiayibu-copy"></i>
						<view class="tips-right">打开智助教育<br />右上角扫一扫</view>
					</view>
				</view>
			</view>
			<view class="shareBottom">
				<view class="bottomTitle">分享到</view>
				<view class="bottomIcons">
					<view class="bottomIcon" @click="shareWechat">
						<i class="iconfont iconweixin"></i>
						<text>微信</text>
					</view>
					<view class="bottomIcon" @click="saveImage">
						<i class="iconfont iconxiazai"></i>
						<text>下载保存</text>
					</view>
				</view>
				<view class="bottomCancel" @click="closeFunc">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/';
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				path: '',
				isShow: false,
				base: {
					width: '600rpx',
					height: '560rpx',
					background: '#FFFFFF',
					radius: '10rpx 10rpx 0 0',
					views: [{
						type: 'image',
						// src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2628339194,2733930395&fm=26&gp=0.jpg',
						css: {
							left: '0rpx',
							top: '0rpx',
							width: '600rpx',
							height: '360rpx',
							mode: 'aspectFill',
							background: 'transparent',
							radius: '10rpx 10rpx 0 0'
						}
					}, {
						type: 'view',
						css: {
							left: '40rpx',
							textAlign: 'left',
							width: '300rpx'
						},
						views: [{
							type: 'text',
							// text: '@树懒懒',
							css: {
								top: '400rpx',
								display: 'block',
								fontSize: '30rpx',
								lineHeight: '40rpx',
								color: '#333333',
								maxLines: 1
							}
						}, {
							type: 'text',
							// text: '时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……时间，会让我们知道……',
							css: {
								top: '430rpx',
								fontSize: '22rpx',
								lineHeight: '30rpx',
								color: '#999999',
								maxLines: 2
							}
						}]
					}, {
						type: 'qrcode',
						// text: 'https://www.baidu.com',
						css: {
							left: '440rpx',
							top: '400rpx',
							width: '120rpx',
							height: '120rpx',
							color: '#000000',
							backgroundColor: '#FFFFFF'
						}
					}]
				}
			}
		},
		props: {
			artBg: '',
			name: '',
			title: '',
			content: '',
			qrText: ''
		},
		created() {
			uni.showLoading({
				title: '加载中...'
			})
			let num = Math.round(Math.random() * 3); //随机生成背景图索引
			var arr = this.artBg.split('.'); //分割图片
			var suffix = arr[arr.length-1]; //获取图片后缀名
			var artBgImg = '';
			if(suffix == 'png' || suffix == 'jpg' || suffix == 'jpeg' || suffix == 'gif') {
				artBgImg = this.artBg;
			}
			this.base.views[0]['src'] = artBgImg ? artBgImg : this.artBgs[num];
			this.base.views[1]['views'][0]['text'] = this.name ? '@' + this.name : '@未知昵称';
			this.base.views[1]['views'][1]['text'] = this.title ? this.title : '未知标题';
			this.base.views[2]['text'] = this.qrText ? this.qrText : 'http://www.zhizhuedu.cn/';
			this.isShow = true;
		},
		methods: {
			// 关闭弹窗
			closeFunc() {
				uni.hideLoading();
				this.$emit('closeFunc');
			},
			// 保存图片到手机
			saveImage() {
				var that = this;
				uni.saveImageToPhotosAlbum({
					filePath: that.path,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						})
					}
				})
			},
			// 微信分享
			shareWechat() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 0,
					href: '',
					title: this.base.views[1]['views'][1]['text'],
					summary: this.content,
					imageUrl: this.base.views[0]['src'],
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			}
		}
	}
</script>

<style scoped>
	.contView {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		overflow: hidden;
	}

	.cont {
		background: #DCDFE6;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1250upx;
	}

	.shareContent {
		width: 100%;
		height: 890upx;
		position: absolute;
		bottom: 320upx;
		left: 0;
	}

	.poster {
		width: 100%;
		position: absolute;
		bottom: 80upx;
	}

	.iconqingkong {
		color: #F4F7FC;
		font-size: 40upx;
		position: absolute;
		right: 30upx;
		top: -60upx;
	}

	uni-canvas {
		margin: auto;
	}

	.tips {
		width: 600upx;
		height: 160upx;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #F7F7F7;
		color: rgba(51, 51, 51, 0.8);
		font-size: 26upx;
	}

	.tips i {
		color: #D8D8DA;
		font-size: 50upx;
	}

	.shareBottom {
		width: 100%;
		height: 320upx;
		background: #FFFFFF;
		border-radius: 10upx 10upx 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.bottomTitle {
		color: #333333;
		font-size: 30upx;
		padding: 20upx 0;
		text-align: center;
	}

	.bottomIcons {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.bottomIcon {
		display: inline-flex;
		align-items: center;
		flex-direction: column;
		height: 150upx;
	}

	.bottomIcon .iconfont {
		color: #FFFFFF;
		width: 90upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		margin-bottom: 20upx;
		border-radius: 50%;
	}

	.iconweixin {
		font-size: 56upx;
		background: #0FCB55;
	}

	.iconxiazai {
		font-size: 40upx;
		background: #FF9900;
	}

	.bottomCancel {
		color: #333333;
		font-size: 34upx;
		text-align: center;
		position: absolute;
		bottom: 30upx;
		width: 100%;
	}
</style>
